<template>
  <div>
    <draggable
      class="dragArea"
      :list="list2"
      group="people"
      @change="log"
      item-key="id"
      @add="addHandeler"
    >
      <template #item="{ element }">
        <div class="list-group-item">
          {{ element.name }}
        </div>
      </template>
    </draggable>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import draggable from "vuedraggable";

const list2 = ref([
  { name: "cat 5", id: 5 },
  { name: "cat 6", id: 6 },
  { name: "cat 7", id: 7 },
]);
const log = (evt) => {
  console.log(evt);
};
const addHandeler = (data: any) => {
  console.log(data, 998);
};
</script>
<style scoped lang="scss">
.dragArea {
  height: 400px;
  background: #eee;
}
</style>
